<!-- 开始挑战 -->
<template>
    <div class="chal-end challenge">
        <div class="btn-history" @click="historyMaskShow=true" v-if="from == 'history'">历史任务</div>
        <div class="chal-con">
            <img  class="avatar" :src="user.Avatar ? user.Avatar : $parent.headError" alt="" :onerror="$parent.headError">
            <div class="chal-con-box">
                <div class="chal-situation">
                    <ul>
                        <li>
                            <em>{{rightCount}}</em>
                            <span>正确</span>
                        </li>
                        <li>
                            <em>{{questionList.length-rightCount}}</em>
                            <span>错误</span>
                        </li>
                        <li>
                            <em>{{questionList.length>0 ? Math.round(rightCount/questionList.length*100) : 0}}%</em>
                            <span>正确率</span>
                        </li>
                    </ul>
                    <p v-show="questionList.length>0">恭喜{{user.TrueName ? user.TrueName : '小萌米'}}，完成答题！</p>
                    <p v-show="questionList.length==0">未答题，无记录！</p>
                </div>
                <div class="question-list">
                    <span class="left" v-for="(item,index) in questionList" :key="index" @click="goQuestion(index)">
                        <em :class="{'iscorrect':item.isCorrect}">{{index+1}}</em>
                    </span>
                </div>
            </div>
            <!-- 按钮 -->
            <div class="chal-end-btn clearfix">
                <span class="left" @click="doAgain()" v-if="from != 'test' && from != 'history'">重新答题</span>
                <span class="right shadow2" @click="goReturn()" v-if="from != 'test' && from != 'history'">返回</span>
                <div class="btn-detail shadow2" @click="goDetail()" v-if="from == 'test' || from == 'history' && questionList.length>0">查看详情</div>
            </div>
        </div>
        <History v-show="historyMaskShow" :historyMaskShow="historyMaskShow" :choseIndex="choseIndex" @choseFun="choseFun" @pickerClose="historyMaskShow=false"></History>
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'
import History from '@/components/History' 

export default {
    name: "challengeEnd",
    components:{
        History,
    },
    data(){
        return{
            from:this.$route.query.from,
            taskid:this.$route.query.taskid,
            hastest:this.$route.query.hastest,
            userid:this.$route.query.studentid ? this.$route.query.studentid : this.$parent.myInfo.UserId,
            user:this.$route.query.studentid ? JSON.parse(sessionStorage.studentInfo) : this.$parent.myInfo,
            bookid:this.$route.query.bookid,   // 书本编号
            rightCount: 0,    // 答对数量
            questionNum:this.$route.query.questionnum,
            questionList:[],

            // 选择器
            historyMaskShow:false,
            choseIndex:0,
            historyIndex:this.$route.query.index,
        }
    },
    watch:{
        
    },
    created(){ 
        this.$parent.menuShow=false;
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            if(this.from=='history'){
                this.choseIndex=this.historyIndex
            }
            if(this.hastest){
                if(this.taskid){
                    this.goChallenge(this.taskid)
                }else{
                    this.getTaskInfo()
                }
            }else{
                this.rightCount=this.$route.query.rightcount
                this.questionList=JSON.parse(sessionStorage.getItem("questionList")) 
            }
            
        }
    },
    mounted(){
        
    },
    destroyed(){
        this.$parent.scoreShow=false;
    },
    methods:{
        //重新挑战
        doAgain(){
            this.$router.replace({path:'/challengeStart',query: {bookid:this.bookid}});
        },
        goReturn(){
            this.$router.go(-1)
        },
        goQuestion(index){
            this.$router.push({path:'/challenge',query: {bookid:this.bookid,fromend:1,endindex:index}});
        },
        goDetail(){
            this.$router.push({path:'/challenge',query: {bookid:this.bookid,fromend:1,endindex:0,from:'test'}});
        },
        // 请求考试任务信息
        getTaskInfo(){
            axGet('GetBookCheckInTask', {
                userId:this.userid,
                bookid:this.bookid,
            }).then(res => {
                if(res.ResultCode==1){
                    this.goChallenge(res.Value.taskId)
                }
            })
        },
        goChallenge(taskid) {
            axGet('GetBookQuestionAnswerLog', {
                userId:this.userid,
                bookId:this.bookid,
                taskid:taskid,
            }).then(res => {
                if(res.ResultCode === 1) {
                    if(res.Value && res.Value.lastAnswerRecord){//有挑战记录
                        this.questionList=JSON.parse(res.Value.lastAnswerRecord)
                        this.rightCount=res.Value.rightCount
                        console.log(this.questionList)
                        sessionStorage.setItem("questionList",res.Value.lastAnswerRecord)
					    // this.$router.push({path:'/challengeEnd',query: {bookid:this.bookid,rightcount:res.Value.rightCount,istest:1}}); 
                    }else{
                        this.questionList=[]
                        this.rightCount=0
                    }
                }
            })
        },
        // 获取答题情况
        getQuestion() {
            axGet('GetBookQuestionList', {
                BookId: this.bookid
            }).then(res => {
                if(res.ResultCode === 1) {
                    this.questionNum=res.Value.totalRecords
                    sessionStorage.setItem("questionList",JSON.stringify(res.Value.list))
                }
            })
        },
        // 选时间段
        choseFun(item,index){
            if(item.taskCategory==2){
                if(this.choseIndex==index){
                    this.historyMaskShow=false;
                }else{
                    this.choseIndex=index;
                    this.goChallenge(item.taskId)
                    this.historyMaskShow=false;
                }
            }else{
                this.$router.replace({path:'/history',query: {bookid:this.bookid, index:index, from:'test'}}); 
            } 
        },
        pickerClose(){
            this.historyMaskShow=false;
        },
    }
}
</script>
<style type="text/css" scoped>
.btn-history{
    position: absolute;
    right: 0.32rem;
    top: 0.2rem;
    height: 0.64rem;
    line-height: 0.64rem;
    color: #02affe;
    font-size: 0.3rem;
    background: #fff url(~@/assets/img/icon/change-blue.png) no-repeat right 0.3rem center;
    background-size: 0.28rem 0.28rem;
    border-radius: 0.34rem;
    padding: 0 0.68rem 0 0.34rem;
}
.chal-end {
    padding-top: 1.02rem;
    padding-bottom: 0.34rem;
}
.chal-con{
    padding-top: 1rem;
    padding-bottom: 1.8rem;
}
.chal-situation{
    padding: 0.48rem 0.8rem 1.1rem;
}
.chal-con .avatar{
    width: 1.2rem;
    height: 1.2rem;
    border: 0.14rem solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -0.74rem;
    left: 50%;
    margin-left: -0.74rem;
    background: #fff;
}
.chal-situation p{
    text-align: center;
    font-size: 0.36rem;
    font-weight: bold;
    line-height: 1;
    padding-top: 0.46rem;
}
.chal-situation ul{
    display:-webkit-box;  
    display:-webkit-flex; 
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}
.chal-situation li{
    width: 33.3%;
    text-align: center;
}
.chal-situation em{
    display: block;
    font-size: 0.4rem;
    font-weight: bold;
    line-height: 1;
    padding-bottom: 0.2rem;
}
.chal-situation span{
    display: block;
    color: #999;
    font-size: 0.28rem;
    line-height: 1;
    border-right:1px solid #e0e0e0;
}
.chal-situation li:last-child span{
    border: 0;
}
.question-list{
    width: 5.8rem;
    margin: 0 auto;
}
.question-list span{
    padding: 0 0.26rem 0.2rem;
}
.question-list em{
    display: block;
    width: 0.64rem;
    height: 0.64rem;
    line-height: 0.64rem;
    text-align: center;
    color: #fff;
    font-size: 0.34rem;
    border-radius: 50%;
    background: #ff7100;
}
.question-list em.iscorrect{
    background: #00cd86;
}
.chal-end-btn{
    text-align: center;
    font-size: 0.36rem;
    width: 100%;
    padding: 0 0.5rem;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    bottom: 0.68rem;
}
.chal-end-btn span{
    width: 47.5%;
    height: 0.86rem;
    line-height: 0.86rem;
    border-radius: 0.5rem;
}
.chal-end-btn .left{
    border: 1px solid #e0e0e0;
    color: #666;
    box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
    -webkit-box-shadow: 0 0.1rem 0.2rem rgba(224,224,224,.3);
}
.chal-end-btn .right{
    background: #02affe;
    color: #fff;
    border: 1px solid #02affe;
}
.btn-detail{
    width: 100%;
    height: 0.9rem;
    line-height: 0.9rem;
    border-radius: 0.5rem;
    background: #02affe;
    color: #fff;
    border: 1px solid #02affe;
}
</style>